import React, { useEffect, useState } from 'react';
import { Space, Table, Tag, Button, message, Popconfirm, Checkbox, Form, Input,Modal } from 'antd';
import type { TableProps, PopconfirmProps, FormProps } from 'antd';
import request from '../../api/request'
import Toub from '../../comounts/Toub'


function Index() {

  let [arr, setArr] = useState([])

  const getData = () => {
    request.get('/article/list', {
      params: {
        page: 1,
        pageSize: 10,
      }
    }).then(res => {
      console.log('列表', res)
      setArr(res.data.rows)
    })
  }

  useEffect(() => {
    getData()
  }, [])

  // 搜索
  type FieldType = {
    username?: string;
    password?: string;
    remember?: string;
  };

  const onFinish: FormProps<FieldType>['onFinish'] = (values) => {
    console.log('Success:', values);
    request.get('/article/list', {
      params: {
        keyword: values.content,
        tag: values.title,
      }
    }).then(res => {
      console.log('列表', res)
      setArr(res.data.rows)
    })
  };

  const onFinishFailed: FormProps<FieldType>['onFinishFailed'] = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };

  // 删除确认框
  const confirm: PopconfirmProps['onConfirm'] = (e) => {
    console.log(e);
    message.success('Click on Yes');
  };

  const cancel: PopconfirmProps['onCancel'] = (e) => {
    console.log(e);
    message.error('Click on No');
  };
  interface DataType {
    key: string;
    name: string;
    age: number;
    address: string;
    tags: string[];
  }

  const columns: TableProps<DataType>['columns'] = [
    {
      title: '请假类型',
      dataIndex: 'id',
      key: 'name',
      render: (text) => <a>{text}</a>,
    },
    {
      title: '开始时间',
      dataIndex: 'createdAt',
      key: 'address',
    },
    {
      title: '结束时间',
      dataIndex: 'updatedAt',
      key: 'address',
    },
    {
      title: '请假天数',
      dataIndex: 'content',
      key: 'age',
    },
    {
      title: '请假原因',
      dataIndex: 'title',
      key: 'address',
    },
    {
      title: '流程状态',
      dataIndex: 'viewCount',
      key: 'address',
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <Button type="primary">编辑</Button>
          <Popconfirm
            title="Delete the task"
            description="Are you sure to delete this task?"
            onConfirm={confirm}
            onCancel={cancel}
            okText="Yes"
            cancelText="No"
          >
            <Button type="primary">删除</Button>

          </Popconfirm>
        </Space>
      ),
    },
  ];

const [isModalOpen, setIsModalOpen] = useState(false);

  const showModal = () => {
    setIsModalOpen(true);
  };

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };

  // type FieldType1 = {
  //   username?: string;
  //   password?: string;
  //   remember?: string;
  // };

  // const onFinish1: FormProps<FieldType>['onFinish'] = (values) => {
  //   console.log('Success:', values);
  // };
  //  const onFinishFailed1: FormProps<FieldType>['onFinishFailed'] = (errorInfo) => {
  //   console.log('Failed:', errorInfo);
  // };

  return (
    <div>
      <Toub></Toub>
      <Form
        name="basic"
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 16 }}
        style={{ maxWidth: 600 }}
        initialValues={{ remember: true }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="off"
      >
        <Form.Item<FieldType>
          label="请假天数"
          name="content"

        >
          <Input />
        </Form.Item>

        <Form.Item label={null}>
          <Button type="primary" htmlType="submit">
            搜索
          </Button>
            <Button type="primary">
            重置
          </Button>
        </Form.Item>
      </Form>
      <>
      <Button type="primary" onClick={showModal}>
        +新增
      </Button>
      <Button type="primary">
        ↓导出
      </Button>
      <Modal
        title="Basic Modal"
        closable={{ 'aria-label': 'Custom Close Button' }}
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <p>Some contents...</p>
        <p>Some contents...</p>
        <p>Some contents...</p>
      </Modal>
    </>
      <Table<DataType> columns={columns} dataSource={arr} />
    </div>
  )
}

export default Index
